<style>
  .long-bb-body {
    max-height: calc(100vh - 200px);
    overflow: hidden;
  }
  .long-bb-bottom {
    height: 180px;
    background: linear-gradient(to top, var(--card-bg), transparent);
    margin-top: -180px;
    position:relative;
    z-index: 5;
  }
</style>

<% if billboard.template == "plain" %>
  <div
    style="<%= billboard.style_string %>"
    data-display-unit data-id="<%= billboard.id %>"
    data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
    data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
    data-context-type="<%= data_context_type %>"
    data-special="<%= billboard.special_behavior %>"
    data-article-id="<%= @article&.id %>"
    data-type-of="<%= billboard.type_of_display %>">
      <%= billboard.processed_html_final.html_safe %>
  </div>
<% elsif billboard.placement_area.start_with?("feed_") %>
  <div class="crayons-story crayons-story__billboard bb-placement js-billboard"
    style="<%= billboard.style_string %>"
    data-display-unit data-id="<%= billboard.id %>"
    data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
    data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
    data-context-type="<%= data_context_type %>"
    data-dismissal-sku="<%= billboard.dismissal_sku %>"
    data-special="<%= billboard.special_behavior %>"
    data-article-id="<%= @article&.id %>"
    data-type-of="<%= billboard.type_of_display %>">
    <div class="crayons-story__body">
      <div class="crayons-story__top flex">
        <%= render partial: "shared/billboard_header", locals: { billboard: billboard } %>
        <% if billboard.dismissal_sku.present? %>
          <button id="sponsorship-close-trigger-<%= billboard.id %>" aria-controls="sponsorship-close-<%= billboard.id %>"
            class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon">
              <%= crayons_icon_tag("x", class: "pointer-events-none", title: "x") %>
          </button>
        <% end %>
      </div>
      <div class="crayons-story__indention-billboard">
        <div class="text-styles text-styles--billboard">
          <%= billboard.processed_html_final.html_safe %>
        </div>
      </div>
    </div>
  </div>
<% elsif billboard.placement_area == "home_hero" %>
  <div class="crayons-card crayons-card--secondary crayons-bb crayons-story__billboard hero-billboard js-billboard"
    style="<%= billboard.style_string %>"
    data-display-unit data-id="<%= billboard.id %>"
    data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
    data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
    data-context-type="<%= data_context_type %>"
    data-dismissal-sku="<%= billboard.dismissal_sku %>"
    data-special="<%= billboard.special_behavior %>"
    data-article-id="<%= @article&.id %>"
    data-type-of="<%= billboard.type_of_display %>">
    <div class="flex">
      <%= render partial: "shared/billboard_header", locals: { billboard: billboard } %>
      <button id="sponsorship-close-trigger-<%= billboard.id %>" aria-controls="sponsorship-close-<%= billboard.id %>"
        class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon">
          <%= crayons_icon_tag("x", class: "pointer-events-none", title: "x") %>
      </button>
    </div>
    <div class="p-1 text-styles text-styles--billboard">
      <%= billboard.processed_html_final.html_safe %>
    </div>
  </div>
<% elsif billboard.placement_area == "post_fixed_bottom" || billboard.placement_area == "page_fixed_bottom" %>
  <div class="crayons-card crayons-card--secondary crayons-bb popover-billboard crayons-story__billboard js-billboard fixed bottom-0 left-0 right-0"
    style="<%= billboard.style_string %>"
    data-display-unit data-id="<%= billboard.id %>"
    data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
    data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
    data-context-type="<%= data_context_type %>"
    data-dismissal-sku="<%= billboard.dismissal_sku %>"
    data-special="<%= billboard.special_behavior %>"
    data-browser-context="<%= billboard.browser_context %>"
    <% if billboard.placement_area == "post_fixed_bottom" && @article.present? %>
      data-article-id="<%= @article&.id %>"
    <% else %>
      data-page-id="<%= billboard.page_id %>"
    <% end %>
    data-type-of="<%= billboard.type_of_display %>">
    <div class="flex">
      <%= render partial: "shared/billboard_header", locals: { billboard: billboard } %>
      <button id="sponsorship-close-trigger-<%= billboard.id %>" aria-controls="sponsorship-close-<%= billboard.id %>"
        class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon">
          <%= crayons_icon_tag("x", class: "pointer-events-none", title: "x") %>
      </button>
    </div>
    <div class="p-1 text-styles text-styles--billboard">
      <%= billboard.processed_html_final.html_safe %>
    </div>
  </div>
<% elsif billboard.placement_area == "post_body_bottom" %>
  <% long_bb = billboard.processed_html_final.size > 750 && billboard.processed_html_final.exclude?("ltag-survey") %>
  <div class="crayons-card crayons-card--secondary crayons-bb js-billboard body-billboard mb-2 mt-6"
    style="<%= billboard.style_string %>"
    data-display-unit data-id="<%= billboard.id %>"
    data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
    data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
    data-context-type="<%= data_context_type %>"
    data-dismissal-sku="<%= billboard.dismissal_sku %>"
    data-special="<%= billboard.special_behavior %>"
    data-article-id="<%= @article&.id %>"
    data-type-of="<%= billboard.type_of_display %>">
    <div class="crayons-story__top flex">
      <%= render partial: "shared/billboard_header", locals: { billboard: billboard } %>
      <% if billboard.dismissal_sku.present? %>
        <button id="sponsorship-close-trigger-<%= billboard.id %>" aria-controls="sponsorship-close-<%= billboard.id %>"
          class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon">
            <%= crayons_icon_tag("x", class: "pointer-events-none", title: "x") %>
        </button>
      <% end %>
    </div>
    <div class="p-1 pt-3 text-styles text-styles--billboard <%= "long-bb-body" if long_bb %>">
      <%= billboard.processed_html_final.html_safe %>
    </div>
    <% if long_bb %>
      <div class="long-bb-bottom"></div>
      <div class="crayons-card__footer">
        <button class="c-cta c-cta--branded billboard-readmore-button">
          Read More
        </button>
      </div>
    <% end %>
  </div>
<% else %>
  <div class="crayons-card crayons-card--secondary crayons-bb bb-placement js-billboard"
    style="<%= billboard.style_string %>"
    data-display-unit data-id="<%= billboard.id %>"
    data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
    data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
    data-context-type="<%= data_context_type %>"
    data-special="<%= billboard.special_behavior %>"
    data-article-id="<%= @article&.id %>"
    data-type-of="<%= billboard.type_of_display %>">
    <%= render partial: "shared/billboard_header", locals: { billboard: billboard } %>
    <div class="p-1 pt-3 text-styles text-styles--billboard">
      <%= billboard.processed_html_final.html_safe %>
    </div>
  </div>
<% end %>
<% if billboard.processed_html_final.include?("ltag-survey") %>
  <script><%= raw SurveyTag.script %></script>
<% end %>